<!DOCTYPE html>

<html>

<head>

    <!-- 页面meta -->

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>工作人员界面</title>

    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式 -->

    <link rel="stylesheet" href="../plugins/elementui/index.css">

    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../css/style.css">

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

</head>

<body class="hold-transition">

<div id="app">

    <div class="content-header">

        <h1 align="center" style="color:white">工作人员系统</h1>

    </div>

    <div class="app-container">

        <div class="box">

            <div class="filter-container">

                <el-input placeholder="人员名称" v-model="pagination.queryString" style="width: 200px;" class="filter-item"></el-input>

                <el-button @click="getAll()" class="dalfBut">查询</el-button>

                <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>

                <el-button type="success" style="float: right;" @click="skip()">商品管理</el-button>

                <el-button type="danger"  style="float: right;" @click="exit()">退出系统</el-button>



            </div>

            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>

                <el-table-column type="index" align="center" label="编号" width="50"></el-table-column>

                <el-table-column prop="username" label="姓名" align="center" width="150"></el-table-column>

                <el-table-column prop="sex" label="性别" align="center" ></el-table-column>

                <el-table-column prop="phone" label="电话" align="center" ></el-table-column>

                <el-table-column prop="address" label="地址" align="center" ></el-table-column>

                <el-table-column prop="password" label="密码" align="center" ></el-table-column>

                <el-table-column label="操作" align="center" >

                    <template slot-scope="scope">

                        <el-button type="text" size="mini" @click="checkInfo(scope.row)">消费记录</el-button>

                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>

                        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>


                    </template>

                </el-table-column>

            </el-table>


            <!--            抽屉嵌套表格查看消费记录-->

            <el-drawer
                    title="消费记录详情"
                    :visible.sync="orderDrawVisible"
                    size="50%">
                <el-table :data="gridData">
                    <el-table-column property="itemName" label="商品名称" align="center"></el-table-column>
                    <el-table-column property="createTime" label="购买时间" align="center"></el-table-column>
                </el-table>
            </el-drawer>

            </el-dialog>

            <!-- 新增物品弹框 -->

            <div class="add-form">

                <el-dialog title="新增工作人员" :visible.sync="dialogFormVisible">

                    <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">

                        <el-row>

                            <el-col :span="12">

                                <el-form-item label="姓名" prop="username">

                                    <el-input v-model="formData.username"/>

                                </el-form-item>

                            </el-col>

                            <el-col :span="12">

                                <el-form-item label="性别" prop="sex">

                                    <template>
                                        <el-select v-model="formData.sex" placeholder="请选择">
                                            <el-option
                                                    v-for="item in options"
                                                    :key="item.sex"
                                                    :label="item.label"
                                                    :value="item.sex">
                                            </el-option>
                                        </el-select>
                                    </template>

                                </el-form-item>

                            </el-col>

                        </el-row>


                        <el-row>

                            <el-col :span="12">

                                <el-form-item label="电话">

                                    <el-input v-model="formData.phone"/>

                                </el-form-item>

                            </el-col>

                            <el-col :span="12">

                                <el-form-item label="密码" prop="password">

                                    <el-input v-model="formData.password"/>

                                </el-form-item>

                            </el-col>

                        </el-row>

                        <el-row>

                            <el-col :span="24">

                                <el-form-item label="地址" prop="address">

                                    <el-input v-model="formData.address"/>

                                </el-form-item>

                            </el-col>

                        </el-row>

                    </el-form>

                    <div slot="footer" class="dialog-footer">

                        <el-button @click="dialogFormVisible = false">取消</el-button>

                        <el-button type="primary" @click="handleAdd()">确定</el-button>

                    </div>

                </el-dialog>

            </div>

            <!-- 编辑物品弹框 -->

            <div class="add-form">

                <el-dialog title="编辑人员" :visible.sync="dialogFormVisible4Edit">

                    <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">

                        <el-row>

                            <el-col :span="12">

                                <el-form-item label="姓名" prop="username">

                                    <el-input v-model="formData.username"/>

                                </el-form-item>

                            </el-col>

                            <el-col :span="12">

                                <el-form-item label="性别" prop="sex">

                                    <template>
                                        <el-select v-model="formData.sex" placeholder="请选择">
                                            <el-option
                                                    v-for="item in options"
                                                    :key="item.sex"
                                                    :label="item.label"
                                                    :value="item.sex">
                                            </el-option>
                                        </el-select>
                                    </template>

                                </el-form-item>

                            </el-col>

                        </el-row>


                        <el-row>

                            <el-col :span="12">

                                <el-form-item label="电话">

                                    <el-input v-model="formData.phone"/>

                                </el-form-item>

                            </el-col>

                            <el-col :span="12">

                                <el-form-item label="密码" prop="password">

                                    <el-input v-model="formData.password"/>

                                </el-form-item>

                            </el-col>

                        </el-row>

                        <el-row>

                            <el-col :span="24">

                                <el-form-item label="地址" prop="address">

                                    <el-input v-model="formData.address"/>

                                </el-form-item>

                            </el-col>

                        </el-row>

                    </el-form>

                    <div slot="footer" class="dialog-footer">

                        <el-button @click="dialogEdit()">取消</el-button>

                        <el-button type="primary" @click="handleEdit()">确定</el-button>

                    </div>

                </el-dialog>

            </div>

        </div>

    </div>

</div>

</body>

<!-- 引入js -->

<!--<script src="../js/vue.js"></script>-->

<!--<script src="../plugins/elementui/index.js"></script>-->

<!--<script type="text/javascript" src="../js/jquery.min.js"></script>-->

<!--<script src="../js/axios-0.18.0.js"></script>-->

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>


<script>


    var vue = new Vue({

        el: '#app',
        data:{

            gridData: [],
            pagination:{},
            dataList: [],//当前页要展示的列表数据
            formData: {},//表单数据
            dialogFormVisible: false,//控制表单是否可见
            dialogFormVisible4Edit:false,//编辑表单是否可见
            orderDrawVisible:false,
            rules: {//校验规则
                type: [{ required: true, message: '物品类别为必填项', trigger: 'blur' }],
                name: [{ required: true, message: '物品名称为必填项', trigger: 'blur' }]
            },
            options: [{
                sex: 'MAN',
                label: '男'
            }, {
                sex: 'WOMAN',
                label: '女'
            }],
            // value: 'MAN'
        },

        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.getAll();
        },

        methods: {
            //查看消费信息
            checkInfo(row){
                var _this=this
                this.orderDrawVisible=true
                console.log(row)
                console.log(row.id)
                console.log("==============")
                axios.get("/shop/", {
                    params: {
                        id: row.id
                    }
                }).then((res) => {
                    console.log(res);
                    // this.dataList = res.data;
                    if (res.data.code == 700) {
                        this.gridData = res.data.data;
                        this.$message.success("加载成功")
                    } else if(res.data.code == 701) {
                        this.$message.error("加载失败")
                    }else{
                        _this.$message.error(res.data.msg)
                    }
                })

            },

            skip(){
                window.location.href="./items.html"
            },
            //退出
            exit(){
                window.location.href="../login/login.html";
            },

            //人员列表
            getAll() {
                var _this=this
                axios.get("/worker", {
                    params: {
                        name: this.pagination.queryString
                    }
                }).then((res) => {
                    console.log(res);
                    // this.dataList = res.data;
                    if (res.data.code == 700) {
                        this.dataList = res.data.data;
                        this.$message.success("加载成功")
                    } else if(res.data.code == 701) {
                        this.$message.error("加载失败")
                    }else{
                        _this.$message.error(res.data.msg)
                    }
                })
            },

            //弹出添加窗口
            handleCreate() {
                this.resetForm()
                this.dialogFormVisible=true
            },

            //重置表单
            resetForm() {
                this.formData={}
            },

            handleAdd() {
                console.log("========")
                axios.post("/worker", this.formData).then((res) => {
                    if (res.data.code == 700) {
                        //关闭新增弹框
                        this.dialogFormVisible = false;
                        this.$message.success("添加成功")
                    } else if(res.data.code == 701){
                        this.$message.error("添加失败")
                    }else{
                        this.$message.error(res.data.msg)
                    }
                }).finally(() => {
                    this.getAll();
                })
            },

            //弹出编辑窗口
            handleUpdate(row) {
                this.dialogFormVisible4Edit=true
                this.formData=row
            },
            dialogEdit(){
                this.dialogFormVisible4Edit=false
                this.getAll()
            },

            // 编辑物品// 不生效的原因在于this的指向变了
            handleEdit() {
                console.log(this.formData)
                this.dialogFormVisible4Edit = false;
                const vm = this; // 保存this到变量vm
                axios({
                    method: 'put',
                    url: '/worker',
                    data: this.formData
                })
                    .then(function (response) {
                        console.log(response);
                        if (response.data.code == 700) {
                            vm.$message.success("修改成功"); // 使用保存的this
                        } else if (response.data.code == 701) {
                            vm.$message.error("修改失败");
                        } else {
                            // 其他错误处理
                        }
                    })
                    .finally(() => {
                        this.getAll();
                    });
            },

            handleDelete(row) {
                axios.delete("/worker/" + row.id).then((res) => {
                    if (res.data.code == 700) {
                        this.$message.success("删除成功")
                    } else if(res.data.code == 701) {
                        this.$message.error("删除失败")
                    }else{
                        this.$message.error(res.data.msg)
                    }
                }).finally(() => {
                    this.getAll();
                })
            }
        }
    })

</script>

</html>